<template>
	<view>
		<view class="pay" style="position: relative;" @click="$u.throttle(submitVipInfo, 2000)">
			<view v-if="payment == '微信支付'" style="display: flex;align-items: center;margin-right: 20rpx;">
				<image src="@/static/common/icon_wx.png" style="width: 38rpx;height: 32rpx;margin-right: 20rpx;">
				</image>
				<text>微信支付</text>
			</view>
			<view v-if="payment == '支付宝支付'" style="display: flex;align-items: center;margin-right: 20rpx;">
				<image src="@/static/common/icon_zfb.png" style="width: 38rpx;height: 32rpx;margin-right: 20rpx;">
				</image>
				<text>支付宝支付</text>
			</view>
			<view v-if="payment == 'ApplePay'" style="display: flex;align-items: center;margin-right: 20rpx;">
				<image src="@/static/common/applePay2.png"
					style="width: 38rpx;height:32rpx;margin-right: 20rpx;vertical-align: middle;"></image>
				<text>Apple Pay</text>
			</view>
			<view style="position: absolute; right: 0rpx;bottom: 5rpx;" @click.stop.prevent="show=true">
				<text style="padding-right: 40rpx;"> | </text>
				<image src="@/static/common/sanj.png"
					style="width: 16px;height: 14px;vertical-align:middle;margin-right: 60rpx;"></image>
			</view>
		</view>
		<view style="display: none;" v-html="aliPayHtml"></view>
		<u-popup :show="show" round="24rpx" mode="center" :safeAreaInsetBottom="false">
			<view class="contentBox">
				<image class="popup-close" src="/static/common/icon_close.png" @click="show=false" />
				<view class="popup-title">请选择支付方式</view>
				<view style="padding: 0 40rpx;">
					<!-- #ifndef H5 -->
					<view v-if="otherPayShow" @click="changePayType('微信支付')"
						style="padding-bottom: 30rpx;border-bottom: 1rpx solid rgba(0,0,0,.1);margin: 40rpx 0;display: flex;justify-content: space-between;align-items: center;">
						<view style="display: flex;align-items: center;grid-gap:20rpx">
							<image mode="aspectFit" style="width: 40rpx;height: 40rpx;vertical-align: middle;"
								src="@/static/common/wechatPay.png"></image>
							<text>微信支付</text>
						</view>
						<image style="width: 30rpx;height: 30rpx;" src="/static/common/right.png"></image>
					</view>
					<!-- #endif -->
					<view v-if="otherPayShow" @click="changePayType('支付宝支付')"
						style="padding-bottom: 30rpx;margin-bottom: 40rpx;;display: flex;justify-content: space-between;align-items: center;">
						<view style="display: flex;align-items: center;grid-gap:20rpx">
							<image mode="aspectFit" style="width: 40rpx;height: 40rpx;vertical-align: middle;"
								src="@/static/common/aliPay.png"></image>
							<text>支付宝支付</text>
						</view>
						<image style="width: 30rpx;height: 30rpx;" src="/static/common/right.png"></image>
					</view>
					<view v-if="applePayShow" @click="changePayType('ApplePay')"
						style="padding-bottom: 30rpx;margin: 40rpx 0;display: flex;justify-content: space-between;align-items: center;">
						<view style="display: flex;align-items: center;grid-gap:20rpx">
							<image mode="aspectFit" style="width: 40rpx;height: 40rpx;vertical-align: middle;"
								src="@/static/common/applePay.png"></image>
							<text>Apple Pay</text>
						</view>
						<image style="width: 30rpx;height: 30rpx;" src="/static/common/right.png"></image>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		name: "selectPayType",
		props: {
			days: {
				default: ''
			},
			type: {
				default: 'vip'
			}
		},
		data() {
			return {
				// #ifdef APP
				payment: '微信支付',
				// #endif
				// #ifndef APP
				payment: '支付宝支付',
				// #endif
				show: false,
				aliPayHtml: '',
				applePayShow: false,
				otherPayShow: false,
				pt: '',
				runType: ''
			};
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					let pt = res.osName
					let type = res.uniPlatform
					this.pt = pt;
					this.runType = type
					if (type === 'web' || pt === 'android') {
						this.otherPayShow = true
						this.applePayShow = false
						return
					} else if (pt === 'ios') {
						this.otherPayShow = false
						this.applePayShow = true
					}
				}
			});
		},
		methods: {
			changePayType(type) {
				this.payment = type
				this.submitVipInfo()
			},
			async submitVipInfo() {
				let res = ''
				let params = {
					paytype: 'alipay',
					method: 'wap'
				}
				if (this.runType === 'app') params.method = 'app'
				if (this.payment == '支付宝支付') params.paytype = 'alipay'
				if (this.payment == '微信支付') params.paytype = 'wechat'
				uni.showLoading({
					title: '支付处理中...'
				})
				try {
					if (this.type == 'vip') {
						params.days = this.days
						console.log(params);
						res = await this.$Api['user'].submitVipInfo(params)
					}
					if (this.type == 'zuanShi') {
						params.recharge_id = this.days
						res = await this.$Api['user'].moneyRecharge(params)
					}
					if (this.payment == '支付宝支付') {
						// #ifdef H5
						this.aliPayHtml = res.data
						this.$nextTick(() => {
							let form = document.getElementById('alipay_submit')
							if (form) form.submit()
						})
						// #endif
						// #ifdef APP
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: res.data,
							success: (res) => {
								this.$Toast('支付成功');
								this.$emit('success')
							},
							fail: (err) => {
								console.log(err);
								this.$Toast(err);
								// this.$Toast('支付失败');
							}
						})
						// #endif
					} else if (this.payment == '微信支付') {
						// #ifdef H5
						alert(JSON.stringify(res))
						// #endif
						// #ifdef APP
						let params = JSON.parse(res.data)
						uni.requestPayment({
							provider: 'wxpay',
							"orderInfo": {
								"appid": params.appid, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
								"noncestr": params.noncestr, // 随机字符串
								"package": params.package, // 固定值
								"partnerid": params.partnerid, // 微信支付商户号
								"prepayid": params.prepayid, // 统一下单订单号
								"timestamp": params.timestamp, // 时间戳（单位：秒）
								"sign": params.sign // 签名，这里用的 MD5/RSA 签名
							},
							success: (res) => {
								this.$Toast('支付成功');
								this.$emit('success')
							},
							fail: (err) => {
								console.error('支付失败详情:', err); // 打印完整错误信息
								this.$Toast('支付失败');
							}
						});
						// #endif
					}
				} catch (error) {
					console.log(error);
				} finally {
					this.show = false
					uni.hideLoading()
				}
			}
		}
	}
</script>
<style lang="scss">
	.pay {
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		background: linear-gradient(135deg, #FE93BF 0%, #A27AFF 100%);
		border-radius: 44rpx;
	}

	.contentBox {
		width: 90vw;
		box-sizing: border-box;
		box-shadow: 0rpx 4rpx 32rpx 0rpx #FFF0FD;
		border-radius: 32rpx;
		background: linear-gradient(180deg, #FFDAF5 0%, #FFFFFF 20%);
		position: relative;

		.popup-close {
			position: absolute;
			right: 0;
			top: -120rpx;
			width: 88rpx;
			height: 88rpx;
			z-index: 1000;
		}

		.popup-title {
			padding-top: 38rpx;
			font-weight: 600;
			font-size: 44rpx;
			color: #323334;
			margin-bottom: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>